<template>
	<view :style="{ '--colorPrimary': color.primary }">
		<view class="mg-top-5 mg-5 br-rd-10" :class="addressId==item.id?'active':'noActive'"
			v-for="(item,index) in datalist" @click="selectedCell(item)">
			<u-cell :border="false">
				<view slot="icon" class="pd-5">
					<image class="logo" :src="item.logoUrl"></image>
				</view>
				<view slot="title">
					<text class="font-size-12 text-indent">{{item.name}}</text>
				</view>
				<view slot="value">
					<text class="font-size-12">{{item.phoneNumber}}</text>
				</view>
				<view slot="label">
					<text class="label font-size-12 text-indent">{{item.address}} </text>

				</view>

			</u-cell>

		</view>

		<u-empty v-if="datalist.length==0" mode="address">
		</u-empty>

	</view>
</template>

<script>
	import {
		getFindByShopList,
	} from '@/api/shop.js'
	export default {
		data() {
			return {
				addressId: 0,
				datalist: []
			}
		},
		mounted: function() {
			var the = this;
			this.getData()
			uni.$on("addressEdit", function() {
				the.getData()
			})
		},
		onShow: () => {

		},
		created: function() {

		},
		watch: {
			datalist: {
				handler(newName, oldName) {
					//	this.getData()
				},
				immediate: true,
				deep: true
			}

		},
		methods: {
			getData: function() {
				var the = this;
				//	if (this.datalist.length == 0) {
				getFindByShopList().then(res => {
					console.log(res)
					if (res.length > 0) {
						var item = res[0]
						the.addressId = item.id
						the.getAction(item, false)
					}
					the.datalist = res
				}).catch(e => {
					var item = {
						name: "",
						phoneNumber: "",
						address: "",
						logoUrl: "",
						id: 0
					}
					the.datalist = []
					the.getAction(item, false)
				})
				//}
			},
			selectedCell: function(item) {
				this.addressId = item.id
				console.log(item)
				this.getAction(item, true)
			},
			getAction: function(item, flag) {
				this.$emit("action", item, flag)
			}
		}
	}
</script>

<style lang="scss">
	.addbtn {
		background-color: var(--color-primary);
		color: #fff;
		text-align: center;
		border-radius: 30px;
	}

	.active {
		border: var(--color-primary) 2px solid !important;
	}

	.noActive {
		border: #fff 2px solid !important;
	}

	.logo {
		width: 40px;
		height: 40px;
	}

	.text-indent {
		text-indent: 10px;
	}
</style>